<template>
	<div class="theContent">
		<contentTitle title="农产品基本情况"></contentTitle>
		<contentBox class="theBase">
			<div class="total" v-for="(item,i) in dataList" :key="i">
				<div class="icon"><img :src="item.icon"></img></div>
				<div class="title">{{item.title}}</div>
				<div class="value">{{item.value}}<span class="unit">{{item.unit}}</span></div>
			</div>
		</contentBox>
	</div>
</template>

<script>
import contentBox from "@/components/contentBox.vue"
import contentTitle from "@/components/contentTitle.vue"
import { listByCategory } from '@/api/home.js'; //同 home 页面
import baseCategoryMixins from "./mixins/baseCategoryMixins.js"

export default {
	name:"Left1CategoryBase",
	components: {
		contentBox,contentTitle
	},
	mixins: [baseCategoryMixins],
	data() {
		return {
			query:{
				year:(new Date()).getFullYear(),
				categoryId:1,//1-香榧 2-笋竹 3-山黄精
			},
			dataList: [],
		};
	},	
	methods: {		
		loadData() {			
			listByCategory(this.query).then(result => {
				console.log('listByCategory Result = ', result);
				let {acreage} = result.listPlant[0] //汇总数据只有1行
				let {amount,count} = result.listSale[0] //汇总数据只有1行
				this.dataList = []
				this.dataList.push({
					icon:require("@/assets/img/icon/amount.png"),
					title:"总产值",
					value:amount,
					unit:'万元'
				})
				this.dataList.push({
					icon:require("@/assets/img/icon/count.png"),
					title:"总产量",
					value:count,
					unit:'吨'
				})
				this.dataList.push({
					icon:require("@/assets/img/icon/acreage.png"),
					title:"种植面积",
					value:acreage,
					unit:'亩'
				})				
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.theContent {	
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap:20px;
	
	.theBase {
		flex:1;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		.total{
			width:33%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			letter-spacing:6px;
			.icon{				
				img{
					height:100px;
					width: 100px;
				}				
			}
			.title{
				color: #FFFFFF;
				font-size: 28px;
				line-height: 70px;
			}
			.value {
				color:#aa5500;
				font-size: 30px;
			}
			.unit{
				color:#aa5500;
				font-size: 24px;
			}
		}
	}	
}	
</style>
